<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好朋友数挑战</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 500px;
            width: 100%;
        }

        h1 {
            color: #4a5568;
            font-size: 2.2em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .progress {
            background: #e2e8f0;
            border-radius: 10px;
            height: 10px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .progress-bar {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }

        .question-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 1.1em;
            color: #4a5568;
        }

        .question {
            font-size: 2.5em;
            color: #2d3748;
            margin: 30px 0;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .rule-explanation {
            background: #e6fffa;
            border: 2px solid #4ecdc4;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 1em;
            color: #2d3748;
        }

        .buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin: 30px 0;
        }

        .btn {
            padding: 25px 50px;
            font-size: 1.8em;
            font-weight: bold;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .btn-yes {
            background: linear-gradient(45deg, #48bb78, #38a169);
        }

        .btn-no {
            background: linear-gradient(45deg, #f56565, #e53e3e);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .feedback {
            margin: 20px 0;
            padding: 15px;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: bold;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feedback.correct {
            background: #c6f6d5;
            color: #22543d;
            border: 2px solid #48bb78;
        }

        .feedback.incorrect {
            background: #fed7d7;
            color: #742a2a;
            border: 2px solid #f56565;
        }

        .next-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 12px 25px;
            font-size: 1.1em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 15px;
            transition: all 0.3s ease;
        }

        .next-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        .score {
            font-size: 1.2em;
            color: #4a5568;
            margin-bottom: 15px;
        }

        .final-score {
            font-size: 2em;
            color: #2d3748;
            margin: 20px 0;
            font-weight: bold;
        }

        .back-btn {
            background: linear-gradient(45deg, #a0aec0, #718096);
            color: white;
            padding: 12px 25px;
            font-size: 1.1em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 480px) {
            .container {
                padding: 20px;
                margin: 10px;
            }
            
            h1 {
                font-size: 1.8em;
            }
            
            .question {
                font-size: 2em;
            }
            
            .buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                padding: 12px 25px;
                font-size: 1.2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>👫 好朋友数挑战</h1>
        

        
        <div class="progress">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="question-info">
            <span>题目 <span id="currentQuestion">1</span>/10</span>
            <span class="score">得分: <span id="score">0</span></span>
        </div>
        
        <div class="question" id="questionText">23 + 7</div>
        
        <div class="buttons">
            <button class="btn btn-yes" id="yesBtn" onclick="answer(true)">是</button>
            <button class="btn btn-no" id="noBtn" onclick="answer(false)">不是</button>
        </div>
        
        <div class="feedback" id="feedback"></div>
        
        <div id="gameEnd" style="display: none;">
            <div class="final-score">🎉 游戏结束！</div>
            <div id="achievementIcon" style="margin: 20px 0; font-size: 4em;"></div>
            <div class="final-score">最终得分: <span id="finalScore">0</span></div>
            <div id="finalMessage" class="final-score" style="font-size: 1.2em; color: #4a5568; margin-top: 10px;"></div>
            <button class="back-btn" onclick="goBack()">返回主页</button>
        </div>
    </div>

    <script>
        let currentQuestionIndex = 0;
        let score = 0;
        let questions = [];
        let answered = false;
        let totalQuestions = 10; // 默认题目数量

        // 音效函数
        function playCorrectSound() {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            // 愉悦的音效 - 上升的音调
            oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
            oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
            oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
            
            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 0.3);
        }
        
        function playIncorrectSound() {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            // 不快的音效 - 下降的低音
            oscillator.frequency.setValueAtTime(220, audioContext.currentTime); // A3
            oscillator.frequency.setValueAtTime(196, audioContext.currentTime + 0.15); // G3
            oscillator.frequency.setValueAtTime(174.61, audioContext.currentTime + 0.3); // F3
            
            oscillator.type = 'sawtooth';
            gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 0.5);
        }
        
        // 语音播放函数
        function playVoice(text) {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = 'zh-CN';
                utterance.rate = 0.8;
                utterance.pitch = 1.2;
                speechSynthesis.speak(utterance);
            }
        }

        // 生成题目
        function generateQuestions() {
            questions = [];
            
            // 根据总题目数量计算各类型题目数量
            const friendCount = Math.round(totalQuestions * 0.4); // 40% 好朋友数题目
            const subtractionCount = Math.round(totalQuestions * 0.2); // 20% 相减且个位和为10的题目
            const sameDigitCount = Math.round(totalQuestions * 0.2); // 20% 相加且个位相等的题目
            const otherCount = totalQuestions - friendCount - subtractionCount - sameDigitCount; // 剩余的其他题目
            
            // 生成好朋友数题目
            for (let i = 0; i < friendCount; i++) {
                questions.push(generateFriendNumberQuestion());
            }
            
            // 生成相减且个位和为10的题目
            for (let i = 0; i < subtractionCount; i++) {
                questions.push(generateSubtractionSum10Question());
            }
            
            // 生成相加且个位相等的题目
            for (let i = 0; i < sameDigitCount; i++) {
                questions.push(generateAdditionSameDigitQuestion());
            }
            
            // 生成其他题目
            for (let i = 0; i < otherCount; i++) {
                questions.push(generateOtherQuestion());
            }
            
            // 打乱题目顺序
            shuffleArray(questions);
        }

        // 生成好朋友数题目
        function generateFriendNumberQuestion() {
            let num1, num2;
            do {
                num1 = Math.floor(Math.random() * 99) + 1;
                num2 = Math.floor(Math.random() * 99) + 1;
            } while (num1 + num2 > 100 || (num1 % 10 + num2 % 10) !== 10 && (num1 % 10 + num2 % 10) !== 0);
            
            return {
                text: `${num1} + ${num2}`,
                isFriend: true,
                explanation: `${num1}的个位数字是${num1 % 10}，${num2}的个位数字是${num2 % 10}，${num1 % 10} + ${num2 % 10} = ${num1 % 10 + num2 % 10}，所以它们是好朋友数！`
            };
        }

        // 生成相减且个位和为10的题目
        function generateSubtractionSum10Question() {
            let num1, num2;
            do {
                num1 = Math.floor(Math.random() * 99) + 1;
                num2 = Math.floor(Math.random() * 99) + 1;
            } while (num1 <= num2 || (num1 % 10 + num2 % 10) !== 10);
            
            return {
                text: `${num1} - ${num2}`,
                isFriend: false,
                explanation: `这是减法题目，不是加法。好朋友数只能是加法题目哦！`
            };
        }

        // 生成相加且个位相等的题目
        function generateAdditionSameDigitQuestion() {
            let num1, num2;
            do {
                num1 = Math.floor(Math.random() * 99) + 1;
                num2 = Math.floor(Math.random() * 99) + 1;
            } while (num1 + num2 > 100 || num1 % 10 !== num2 % 10 || (num1 % 10 + num2 % 10) === 10 || (num1 % 10 + num2 % 10) === 0);
            
            return {
                text: `${num1} + ${num2}`,
                isFriend: false,
                explanation: `${num1}的个位数字是${num1 % 10}，${num2}的个位数字是${num2 % 10}，${num1 % 10} + ${num2 % 10} = ${num1 % 10 + num2 % 10}，不是10也不是0，所以不是好朋友数。`
            };
        }

        // 生成其他题目
        function generateOtherQuestion() {
            let isAddition = Math.random() < 0.5;
            let num1, num2;
            
            if (isAddition) {
                do {
                    num1 = Math.floor(Math.random() * 99) + 1;
                    num2 = Math.floor(Math.random() * 99) + 1;
                } while (num1 + num2 > 100 || (num1 % 10 + num2 % 10) === 10 || (num1 % 10 + num2 % 10) === 0 || num1 % 10 === num2 % 10);
                
                return {
                    text: `${num1} + ${num2}`,
                    isFriend: false,
                    explanation: `${num1}的个位数字是${num1 % 10}，${num2}的个位数字是${num2 % 10}，${num1 % 10} + ${num2 % 10} = ${num1 % 10 + num2 % 10}，不是10也不是0，所以不是好朋友数。`
                };
            } else {
                do {
                    num1 = Math.floor(Math.random() * 99) + 1;
                    num2 = Math.floor(Math.random() * 99) + 1;
                } while (num1 <= num2 || (num1 % 10 + num2 % 10) === 10);
                
                return {
                    text: `${num1} - ${num2}`,
                    isFriend: false,
                    explanation: `这是减法题目，不是加法。好朋友数只能是加法题目哦！`
                };
            }
        }

        // 打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        // 显示当前题目
        function showQuestion() {
            if (currentQuestionIndex >= questions.length) {
                endGame();
                return;
            }
            
            const question = questions[currentQuestionIndex];
            document.getElementById('questionText').textContent = question.text;
            document.getElementById('currentQuestion').textContent = currentQuestionIndex + 1;
            document.getElementById('progressBar').style.width = ((currentQuestionIndex + 1) / totalQuestions) * 100 + '%';
            
            // 重置按钮状态
            document.getElementById('yesBtn').disabled = false;
            document.getElementById('noBtn').disabled = false;
            document.getElementById('feedback').innerHTML = '';
            document.getElementById('feedback').className = 'feedback';
            answered = false;
        }

        // 回答问题
        function answer(userAnswer) {
            if (answered) return;
            
            answered = true;
            const question = questions[currentQuestionIndex];
            const isCorrect = userAnswer === question.isFriend;
            
            // 禁用按钮
            document.getElementById('yesBtn').disabled = true;
            document.getElementById('noBtn').disabled = true;
            
            // 显示反馈
            const feedback = document.getElementById('feedback');
            if (isCorrect) {
                score++;
                playCorrectSound(); // 播放正确音效
                // 回答正确直接跳转到下一题
                setTimeout(() => {
                    nextQuestion();
                }, 500);
                feedback.className = 'feedback correct';
                feedback.innerHTML = `✓ 回答正确！`;
            } else {
                playIncorrectSound(); // 播放错误音效
                feedback.className = 'feedback incorrect';
                feedback.innerHTML = `✗ 回答错误！<br>${question.explanation}<button class="next-btn" onclick="nextQuestion()">下一题</button>`;
            }
            
            // 更新得分
            document.getElementById('score').textContent = score;
        }

        // 下一题
        function nextQuestion() {
            currentQuestionIndex++;
            if (currentQuestionIndex >= totalQuestions) {
                endGame();
            } else {
                showQuestion();
            }
        }

        // 结束游戏
        function endGame() {
            document.querySelector('.question-info').style.display = 'none';
            document.querySelector('.question').style.display = 'none';
            document.querySelector('.buttons').style.display = 'none';
            document.querySelector('.feedback').style.display = 'none';
            
            document.getElementById('finalScore').textContent = `${score}/${totalQuestions}`;
            
            // 根据得分显示不同的图标和播放不同的语音
            const achievementIcon = document.getElementById('achievementIcon');
            const finalMessage = document.getElementById('finalMessage');
            
            if (score === totalQuestions) {
                // 全对
                achievementIcon.textContent = '🏆';
                finalMessage.textContent = '太棒了！全部答对！';
                playVoice('太棒了！全部答对！你是好朋友数的小专家！');
            } else if (score >= totalQuestions * 0.8) {
                // 80%以上
                achievementIcon.textContent = '🌟';
                finalMessage.textContent = '表现优秀！';
                playVoice('表现优秀！继续加油！');
            } else if (score >= totalQuestions * 0.6) {
                // 60%以上
                achievementIcon.textContent = '👍';
                finalMessage.textContent = '不错哦！';
                playVoice('不错哦！再练习一下会更好！');
            } else {
                // 60%以下
                achievementIcon.textContent = '💪';
                finalMessage.textContent = '继续努力！';
                playVoice('继续努力！多练习就能掌握好朋友数了！');
            }
            
            document.getElementById('gameEnd').style.display = 'block';
        }

        // 返回主页
        function goBack() {
            window.location.href = 'index.html';
        }

        // 初始化游戏
        function initGame() {
            // 从localStorage读取题目数量设置
            const savedQuestionCount = localStorage.getItem('friendNumbersQuestionCount');
            if (savedQuestionCount) {
                totalQuestions = parseInt(savedQuestionCount);
                // 清除localStorage中的设置，避免影响下次游戏
                localStorage.removeItem('friendNumbersQuestionCount');
            }
            
            generateQuestions();
            showQuestion();
            updateProgress();
        }// 页面加载完成后初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>